<template>
  <div>
    <div class="ai_report">
      <el-button class="report_export" type="primary" size="medium" @click="getPdf()">导出</el-button>

      <div class="report_container" id="pdfDom">
        <div class="report_title">
          <span>{{ courseData.course_info.class_name }} {{ courseData.course_info.subject_name }} {{ courseData.course_info.course_name_time }}&nbsp;&nbsp;&nbsp;课堂观察分析报告</span>
        </div>

        <!-- 课堂信息 -->
        <div class="class_info">
          <div class="class_title">
            <span>一、课堂信息</span>
          </div>
          <table class="class_info_table">
            <tr>
              <th>课程名称</th>
              <th>{{ courseData.course_info.class_name }} {{ courseData.course_info.subject_name }} {{ courseData.course_info.course_name_time }}</th>
              <th>上课时间</th>
              <th>{{ courseData.course_info.course_time }}</th>
            </tr>
            <tr>
              <td>科目</td>
              <td>{{ courseData.course_info.subject_name }}</td>
              <td>主讲教师</td>
              <td>{{ courseData.course_info.teacher_name }}</td>
            </tr>
            <tr>
              <td>年级</td>
              <td>{{ courseData.course_info.grade_name }}</td>
              <td>班级</td>
              <td>{{ courseData.course_info.class_name }}</td>
            </tr>
          </table>
        </div>

        <!-- 课堂观察记录 -->
        <div class="class_record">
          <div class="class_title">
            <span>二、课堂观察记录</span>
          </div>

          <table class="class_record_table">
            <tr>
              <th colspan="9">学生动作行为次数</th>
            </tr>
            <tr>
              <td class="average" rowspan="2">平均课堂参与度：{{ courseData.class_participation }}</td>
              <td>听讲次数</td>
              <td>实践次数</td>
              <td>演示次数</td>
              <td>阅读次数</td>
              <td>讨论次数</td>
            </tr>
            <tr>
              <td>{{ courseData.student_actions.listening_count }}次</td>
              <td>{{ courseData.student_actions.practice_count }}次</td>
              <td>{{ courseData.student_actions.demonstrate_count }}次</td>
              <td>{{ courseData.student_actions.read_count }}次</td>
              <td>{{ courseData.student_actions.discuss_count }}次</td>
            </tr>
          </table>

          <!-- 学生情绪 -->
          <table class="class_record_table class_record_emo">
            <tr>
              <th colspan="8">学生表情变化次数</th>
            </tr>
            <tr class="class_center">
              <td>
                <div class="expression_box">
                  <span>惊喜</span>
                  <img src="../../../assets/images/ai/surprise.png" alt="" />
                </div>
              </td>
              <td>
                <div class="expression_box">
                  <span>快乐</span>
                  <img src="../../../assets/images/ai/happy.png" alt="" />
                </div>
              </td>
              <td>
                <div class="expression_box">
                  <span>中性</span>
                  <img src="../../../assets/images/ai/neutral.png" alt="" />
                </div>
              </td>
              <td>
                <div class="expression_box">
                  <span>悲伤</span>
                  <img src="../../../assets/images/ai/sad.png" alt="" />
                </div>
              </td>
              <td>
                <div class="expression_box">
                  <span>愤怒</span>
                  <img src="../../../assets/images/ai/anger.png" alt="" />
                </div>
              </td>
              <td>
                <div class="expression_box">
                  <span>厌恶</span>
                  <img src="../../../assets/images/ai/detest.png" alt="" />
                </div>
              </td>
              <td>
                <div class="expression_box">
                  <span>恐惧</span>
                  <img src="../../../assets/images/ai/fear.png" alt="" />
                </div>
              </td>
            </tr>

            <tr>
              <td>{{ courseData.student_expressions.surprise }}次</td>
              <td>{{ courseData.student_expressions.happy }}次</td>
              <td>{{ courseData.student_expressions.neutral }}次</td>
              <td>{{ courseData.student_expressions.sad }}次</td>
              <td>{{ courseData.student_expressions.anger }}次</td>
              <td>{{ courseData.student_expressions.detest }}次</td>
              <td>{{ courseData.student_expressions.fear }}次</td>
            </tr>

            <tr>
              <td>学生行为分析</td>
              <td colspan="6">
                <Behavior
                  :line-style="{
                    backgroundColor: '#000',
                    bottom: '33px',
                    width: '87%',
                    marginLeft: '60px'
                  }"
                  height="300px"
                  width="100%"
                  :option="behaviorStuOptions"
                />
              </td>
            </tr>
          </table>

          <!-- 行为 -->
          <table class="class_record_table class_record_teacher">
            <tr>
              <th colspan="4">教师教学行为分布</th>
              <th colspan="3">教师行为轨迹分布</th>
            </tr>
            <tr>
              <td colspan="4">
                <Behavior
                  :line-style="{
                    backgroundColor: '#000',
                    bottom: '30px',
                    width: '80%',
                    marginLeft: '70px'
                  }"
                  :option="behaviorOptions"
                  height="300px"
                  width="100%"
                />
              </td>
              <td colspan="3">
                <Scatter :scatter-data="scatterData" class="trajectory" id="scatterReport" width="240px" height="135px" color="#CCD2FF" />
              </td>
            </tr>
            <tr>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_behavior_duration.teach_duration) }}分钟 <br />讲授时长</td>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_behavior_duration.interaction_duration) }} <br />互动时长</td>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_behavior_duration.guidance_duration) }} <br />指导时长</td>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_behavior_duration.blackboard_duration) }} <br />板书时长</td>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_trajectory_duration.podium) }} <br />讲台时长</td>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_trajectory_duration.trajectory) }}<br />巡视时长</td>
              <td>{{ courseData.teacher_behavior.teaching_trajectory_duration.trajectory_times }}次 <br />巡视次数</td>
            </tr>
          </table>

          <table class="observation_table">
            <tr>
              <th>序号</th>
              <th colspan="2">观察维度</th>
              <th>比例</th>
              <th>图例</th>
            </tr>
            <tr>
              <td>1</td>
              <td rowspan="5">学生行为</td>
              <td>听讲</td>
              <td>{{ courseData.watch_dimension.student_behavior_count.listen_rate }}</td>
              <td class="observation_table_map" rowspan="10">
                <ActionPie id="action-pie" width="500px" :pie-data="courseData.watch_dimension" height="300px" />
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>实践</td>
              <td>{{ courseData.watch_dimension.student_behavior_count.practice_rate }}</td>
            </tr>
            <tr>
              <td>3</td>
              <td>演示</td>
              <td>{{ courseData.watch_dimension.student_behavior_count.demonstrate_rate }}</td>
            </tr>
            <tr>
              <td>4</td>
              <td>阅读</td>
              <td>{{ courseData.watch_dimension.student_behavior_count.read_rate }}</td>
            </tr>
            <tr>
              <td>5</td>
              <td>讨论</td>
              <td>{{ courseData.watch_dimension.student_behavior_count.discuss_rate }}</td>
            </tr>
            <tr>
              <td>6</td>
              <td rowspan="5">教师行为</td>
              <td>教师讲授</td>
              <td>{{ courseData.watch_dimension.teacher_behavior_count.teach_rate }}</td>
            </tr>
            <tr>
              <td>7</td>
              <td>指导学生</td>
              <td>{{ courseData.watch_dimension.teacher_behavior_count.guidance_rate }}</td>
            </tr>
            <tr>
              <td>8</td>
              <td>书写板书</td>
              <td>{{ courseData.watch_dimension.teacher_behavior_count.blackboard_rate }}</td>
            </tr>
            <tr>
              <td>9</td>
              <td>师生互动</td>
              <td>{{ courseData.watch_dimension.teacher_behavior_count.interaction_rate }}</td>
            </tr>
            <tr>
              <td>10</td>
              <td>教师巡视</td>
              <td>{{ courseData.watch_dimension.teacher_behavior_count.tour_rate }}</td>
            </tr>
          </table>

          <!-- 专注度曲线 -->
          <table class="class_record_table class_atten_stu">
            <tr>
              <td class="vertical-rl">学生专注度曲线</td>
              <td class="class_stu_attention" colspan="7">
                <LineChart :y-max="100" type="attention" :xAxisData="xAxisAttenData" :y-axis-text="attenYAxisText" :origin-data="attentionOriginData" id="line3" width="700px" text-color="#000" />
              </td>
            </tr>
            <tr class="atten_stu_footer">
              <td rowspan="2">
                <span class="atten_avg">{{ courseData.student_behavior.show.average }} </span><br />学生专注度平均值
              </td>
              <td rowspan="2">
                <div class="atten_stu_box">
                  <span class="atten_title">注意力集中阶段</span>

                  <div class="text_box">
                    <span
                      >发生于<span class="time_color"> {{ courseData.student_behavior.show.focus.time_interval }}</span
                      >期间</span
                    >
                    <span
                      >平均专注度<span class="text_orange">{{ courseData.student_behavior.show.focus.value }}</span></span
                    >
                    <span
                      >持续时间为<span class="text_orange">{{ courseData.student_behavior.show.focus.duration }}</span></span
                    >
                  </div>
                </div>
              </td>
              <td rowspan="2">
                <div class="atten_stu_box">
                  <span class="atten_title">注意力涣散阶段</span>

                  <div class="text_box">
                    <span
                      >发生于<span class="time_color">{{ courseData.student_behavior.show.slack.time_interval }}</span
                      >期间</span
                    >
                    <span
                      >平均专注度<span class="text_orange">{{ courseData.student_behavior.show.slack.value }}</span></span
                    >
                    <span
                      >持续时间为<span class="text_orange">{{ courseData.student_behavior.show.slack.duration }}</span></span
                    >
                  </div>
                </div>
              </td>
              <td rowspan="2">
                <div class="atten_stu_box">
                  <span class="atten_title">学生活跃度分析</span>

                  <div class="text_box">
                    <span
                      >发生于<span class="time_color">{{ courseData.student_behavior.show.active.exciting.time_interval }}</span
                      >期间学生情绪较兴奋</span
                    >
                    <span
                      >发生于<span class="time_color">{{ courseData.student_behavior.show.active.low.time_interval }}</span
                      >期间学生情绪较低落</span
                    >
                  </div>
                </div>
              </td>
            </tr>
          </table>

          <!-- 学生情绪 -->
          <table class="class_record_table class_atten_stu">
            <tr>
              <td class="vertical-rl emo_td">学生情绪曲线</td>
              <td class="class_stu_attention" colspan="7">
                <LineChart :xAxisData="xAxisEmoData" :y-max="6" :y-axis-text="emoYAxisText" :origin-data="emoOriginData" id="line4" width="700px" text-color="#000" />
              </td>
            </tr>
          </table>
        </div>

        <!-- 结构式观察图 -->
        <div class="class_structure">
          <div class="class_title">
            <span>三、结构式课堂观察记录</span>
          </div>

          <table class="record_class_table">
            <tr>
              <th class="bgc_b">观察者</th>
              <th>教学AI数据分析系统</th>
              <th class="bgc_b">观察时间</th>
              <th>{{ courseData.course_info.observation_time }}</th>
            </tr>
            <tr>
              <td class="bgc_b">课程时长</td>
              <td colspan="3">{{ formatTime(courseData.course_info.video_time) }}分钟</td>
            </tr>
            <tr>
              <td class="teaching-model">教学模型</td>
              <td colspan="3">
                <StChart
                  :y-max="y_max"
                  :x-max="x_max"
                  :x-data="st_x_data"
                  :origin-data="originSTData"
                  class="st_chart"
                  title="S - T 模型"
                  id="reportSt"
                  x-axis-name="(T%)"
                  y-axis-name="(S%)"
                  width="700px"
                  height="600px"
                  text-color="#000"
                />
                <div class="ch_container">
                  <ul class="st_tip">
                    <li>师生互动曲线描述的是老师和学生的互动情况</li>
                    <li>沿横轴方向的线段代表老师在讲话，沿纵轴方向的线段代表学生在讲话</li>
                    <li>当曲线倾斜角小于45度时，表示老师活动占多数；倾斜角大于45度时，学生活动占多数</li>
                    <li>当某段倾斜角约45度时，表示在此段时间内老师学生互动充分。</li>
                  </ul>
                </div>

                <ChChart
                  :origin-point="originPoint"
                  class="st_chart"
                  title="RT - CH 模型"
                  id="reportCh"
                  width="700px"
                  line-color="#3D89DE"
                  height="400px"
                  x-axis-name="(RT%)"
                  y-axis-name="(CH%)"
                  text-color="#000"
                />
                <div class="mix-style">
                  <span class="a_r_tit">RT - CH 模型标准模式</span>
                  <table>
                    <tr>
                      <th>教学模式</th>
                      <th>练习型</th>
                      <th>混合型</th>
                      <th>对话型</th>
                      <th>讲授型</th>
                    </tr>
                    <tr>
                      <td>判断标准</td>
                      <td>Rt &le;0.3</td>
                      <td>Rt &ge;0.7</td>
                      <td>Ch &ge;0.4</td>
                      <td>0.3 &lt;Rt&le; 0.7,Ch&lt;0.4</td>
                    </tr>
                  </table>

                  <div class="ch_container">
                    <ul class="st_tip">
                      <li>
                        Rt是指教师行为的占有比例，此值越大说明教师行为越多。 Ch是教师行为与学生行为之间的转换次数，此值越大说明教师-学生行为的转换次数越多。
                        四种课堂类型：练习型、讲授型、对话型、混合型是联合Rt和Ch的值来划分的。
                      </li>
                      <li>对话型的显著特点是Ch值，也就是师生转换次数，比较高，此种模式师生之间互动充分</li>
                      <li>讲授型的显著特点是Rt值，也就是教师行为比例，比较高，此种模式以教师讲授为主</li>
                      <li>当教师行为占有率较低时，此时以学生活动为主，为练习型</li>
                      <li>当教师行为占有率在一半附近时，此时教师、学生均充分参与，为混合（探究）型</li>
                    </ul>
                  </div>

                  <div class="change-maps-box clear">
                    <div class="action-box-r1">
                      <div class="a-box-r1-l">
                        <span class="action-title">学生行为</span>
                        <span class="stu-rate">{{ courseData.time_allocation.student_time_per }}</span>
                        <span class="action-title">教师行为</span>
                        <span class="teacher-rate">{{ courseData.time_allocation.teacher_time_per }}</span>
                      </div>
                      <ReportPie :pie-data="courseData.time_allocation" id="reportPie" width="160px" height="100%" />
                    </div>
                    <div class="action-box-r3">
                      <p>{{ formatType(courseData.suggest.rt_ch_type) }}</p>
                      <p>课堂类型</p>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr class="class_result">
              <td class="class-type-tit">AI课堂建议</td>
              <td class="summary" colspan="3">
                <p class="hide-p4">{{ courseData.suggest.rt_ch_conclusion }}</p>
                <span class="numberWord">
                  <i>{{ lengthFormat(courseData.suggest.rt_ch_conclusion) }}</i>
                  <i>/500</i>
                </span>
              </td>
            </tr>
          </table>
        </div>

        <div id="header"></div>

        <div id="footer"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Behavior from "../echart/behavior.vue";
import Scatter from "../echart/scatter.vue";
import LineChart from "../echart/line.vue";
import StChart from "../echart/st.vue";
import ChChart from "../echart/ch.vue";
import ReportPie from "../echart/report-pie.vue";
import ActionPie from "../echart/action-pie.vue";

const attenYAxisText = ["未学习", "未集中", "未听讲", "走神", "中性", "集中", "专注"];
const emoYAxisText = ["恐惧", "厌恶", "愤怒", "快乐", "中性", "悲伤", "惊喜"];

const attentionOriginData = {
  name: "课堂一",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "#71D1CF",
    width: 4
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(49, 255, 233, 1)" },
          { offset: 1, color: "rgba(159, 88, 255, 0)" }
        ],
        false
      )
    }
  }
};

const emoOriginData = {
  name: "课堂一",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "#71D1CF",
    width: 4
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(49, 255, 233, 1)" },
          { offset: 1, color: "rgba(159, 88, 255, 0)" }
        ],
        false
      )
    }
  }
};

const enumStuAction = {
  1: "讨论时长",
  3: "阅读时长",
  5: "演示时长",
  7: "实践时长",
  9: "听讲时长"
};

const enumStuActionKey = {
  1: "discuss",
  3: "read",
  5: "demonstrate",
  7: "practice",
  9: "listen"
};

const enumTeaAction = {
  1: "教室巡视",
  3: "师生互动",
  5: "书写板书",
  7: "指导学生",
  9: "教师讲授"
};
const enumTeaActionKey = {
  1: "tour",
  3: "interaction",
  5: "blackboard",
  7: "guidance",
  9: "teach"
};

export default {
  components: {
    Behavior,
    Scatter,
    LineChart,
    ChChart,
    StChart,
    ReportPie,
    ActionPie
  },
  data() {
    return {
      originSTData: {},
      y_max: 0,
      x_max: 0,
      st_x_data: [],
      htmlTitle: null,
      originPoint: {},
      attenYAxisText,
      emoYAxisText,
      behaviorStuOptions: {}, // 学生行为数据
      behaviorOptions: {}, // 教师行为数据
      courseData: {},
      scatterData: [], // 教师轨迹
      attentionOriginData,
      emoOriginData,
      xAxisAttenData: [],
      xAxisEmoData: []
    };
  },
  computed: {
    formatTimeHours() {
      return (seconds) => {
        if (seconds !== "undefined") {
          let hours = Math.floor(seconds / 3600);
          let minutes = Math.floor((seconds % 3600) / 60);
          let remainingSeconds = seconds % 60;

          // 添加前导零
          hours = hours < 10 ? "0" + hours : hours;
          minutes = minutes < 10 ? "0" + minutes : minutes;
          remainingSeconds = remainingSeconds < 10 ? "0" + remainingSeconds : remainingSeconds;

          return hours + ":" + minutes + ":" + remainingSeconds;
        } else {
          return "00:00:00";
        }
      };
    },
    lengthFormat() {
      return (value) => {
        return String(value).length;
      };
    },
    // 专注度百分比格式化
    focusFormat() {
      return (value) => {
        return parseFloat(value) || 0;
      };
    },
    // 格式化秒为分钟
    formatTime() {
      return (value) => {
        const minutes = value / 60;
        return minutes.toFixed(1);
      };
    },
    formatType() {
      return (value) => {
        let text = "";
        switch (value) {
          case 1:
            text = "讲授型";
            break;
          case 2:
            text = "练习型";
            break;
          case 3:
            text = "对话型";
            break;
          case 4:
            text = "混合型";
            break;
        }

        return text;
      };
    }
  },
  methods: {
    init() {
      this.getCourse();
      this.transStuBehaviorData();
      this.transBehaviorData();
      this.transTrajectoryData();
      this.transStuAttention();
      this.transStuEmoData();
      this.transStData();
      this.transRTChData();
    },

    handleExport() {
      this.htmlToPDf({
        element: document.getElementById("pdfDom"),
        footer: document.getElementById("footer"),
        header: document.getElementById("header")
      });
    },
    getCourse() {
      const courseData = JSON.parse(localStorage.getItem("courseData"));
      this.courseData = courseData;
    },

    // 转换 学生行为分析数据
    transStuBehaviorData() {
      let studying_behavior = this.courseData.student_behavior.studying_behavior || [];
      const keys = ["discuss", "read", "demonstrate", "practice", "listen"];
      const yAxisText = ["讨论", "", "阅读", "", "演示", "", "实践", "", "听讲"];
      const dataValue = [];

      const infoData = this.courseData.student_behavior.studying_behavior_source || {};
      const tooltipData = this.handleContinuous(infoData);

      this.setJsonData("discuss", "read", "demonstrate", "practice", "listen", infoData, studying_behavior);

      for (let i = 0; i < 9; i += 2) {
        for (let j = 0; j < studying_behavior[keys[i / 2]].length; j++) {
          const key = keys[i / 2];
          const value = parseInt(studying_behavior[key][j]) ? i + 1 : 0;
          dataValue.push([i, j, value]);
        }
      }
      const minuteXaxis = [];

      for (let i = 1; i < this.courseData.course_info.video_time; i++) {
        minuteXaxis.push(i);
      }
      const data = dataValue.map((item) => [item[1], item[0], item[2] || "-"]);

      this.behaviorStuOptions = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true
        },
        tooltip: {
          show: true,
          formatter: (obj) => {
            const hoverItem = infoData[enumStuActionKey[obj.data[2]]].find((item) => {
              if (item.Start < obj.data[0] && obj.data[0] < item.End) {
                return item;
              }
            });

            // 后端数据返回分间隔但是又是连续的 需要特殊处理
            if (tooltipData[enumStuActionKey[obj.data[2]]]) {
              return `${enumStuAction[obj.data[2]]}: ${this.formatTimeHours(tooltipData[enumStuActionKey[obj.data[2]]])}`;
            }
            if (hoverItem) {
              return `${enumStuAction[obj.data[2]]}: ${this.formatTimeHours(hoverItem.End - hoverItem.Start)}`;
            } else {
              return "";
            }
          }
        },
        xAxis: [
          {
            type: "category",
            data: minuteXaxis,
            splitArea: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#D7DBE0",
                borderType: [5, 10],
                borderDashOffset: 5
              }
            },
            axisLabel: {
              fontSize: 12,
              color: "#000",
              margin: 20,
              interval: parseInt(this.courseData.course_info.video_time / 5),
              formatter: (value) => {
                return `${this.formatTimeHours(value)}`;
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            data: yAxisText,
            splitArea: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#000"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        visualMap: {
          type: "piecewise",
          hoverLink: false,
          min: 0,
          max: 10,
          orient: "horizontal",
          itemGap: 0,
          precision: 2,
          padding: 5,
          borderWidth: 1,
          borderColor: "none",

          show: false,
          pieces: [
            {
              gt: 0,
              lte: 1,
              color: "#cbe21a"
            },
            {
              gt: 1,
              lte: 3,
              color: "#15c136"
            },
            {
              gt: 3,
              lte: 5,
              color: "#6849ff"
            },
            {
              gt: 5,
              lte: 7,
              color: "#16c9ba"
            },
            {
              gt: 7,
              lte: 9,
              color: "#1978e5"
            }
          ],
          outOfRange: {
            color: "#999"
          }
        },
        series: [
          // 不连续柱状图
          {
            name: "拥堵指数",
            type: "heatmap",
            data: data,
            label: {
              show: false
            },

            itemStyle: {
              borderWidth: 0,
              borderColor: "#FFFFFF"
            },

            emphasis: {
              itemStyle: {
                shadowOffsetY: 2,
                shadowBlur: 6,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    },

    // 全部是否连续
    handleContinuous(dataObj) {
      const continuousData = {};
      for (const key in dataObj) {
        let sum = 0;
        for (let i = 0; i < dataObj[key].length; i++) {
          if (dataObj[key][i + 1] && (dataObj[key][i].End === dataObj[key][i + 1].Start || dataObj[key][i].End === dataObj[key][i + 1].Start - 1)) {
            sum += dataObj[key][i].End - dataObj[key][i].Start;
            continuousData[key] = sum;
          } else if (!dataObj[key][i + 1]) {
          } else {
            break;
          }
        }
      }

      return continuousData;
    },

    // 封装获取的数据
    setJsonData(name1, name2, name3, name4, name5, infoData, teaching_behavior) {
      teaching_behavior[name5] = [];
      infoData[name5].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name5][i] = "1";
        }
      });

      // 实践 guidance
      teaching_behavior[name4] = [];
      infoData[name4].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name4][i] = "1";
        }
      });

      // 演示 blackboard
      teaching_behavior[name3] = [];
      infoData[name3].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name3][i] = "1";
        }
      });

      // 阅读 interaction
      teaching_behavior[name2] = [];
      infoData[name2].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name2][i] = "1";
        }
      });

      // 讨论 tour
      teaching_behavior[name1] = [];
      infoData[name1].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name1][i] = "1";
        }
      });
      let num1 = teaching_behavior[name5].length;
      let num2 = teaching_behavior[name4].length;
      let num3 = teaching_behavior[name3].length;
      let num4 = teaching_behavior[name2].length;
      let num5 = teaching_behavior[name1].length;
      let max = num1;
      if (num2 > max) {
        max = num2;
      }

      if (num3 > max) {
        max = num3;
      }

      if (num4 > max) {
        max = num4;
      }

      if (num5 > max) {
        max = num5;
      }
      if (max > num1 && num1 != 0) {
        for (let i = teaching_behavior[name5].length; i < max; i++) {
          teaching_behavior[name5][i] = "0";
        }
      }
      if (max > num2 && num2 != 0) {
        for (let i = teaching_behavior[name4].length; i < max; i++) {
          teaching_behavior[name4][i] = "0";
        }
      }
      if (max > num3 && num3 != 0) {
        for (let i = teaching_behavior[name3].length; i < max; i++) {
          teaching_behavior[name3][i] = "0";
        }
      }
      if (max > num4 && num4 != 0) {
        for (let i = teaching_behavior[name2].length; i < max; i++) {
          teaching_behavior[name2][i] = "0";
        }
      }
      if (max > num5 && num5 != 0) {
        for (let i = teaching_behavior[name1].length; i < max; i++) {
          teaching_behavior[name1][i] = "0";
        }
      }
    },

    // 转换 教师行为分析数据
    transBehaviorData() {
      let teaching_behavior = this.courseData.teacher_behavior.teaching_behavior || [];
      const keys = ["tour", "interaction", "blackboard", "guidance", "teach"];
      const yAxisText = ["教室巡视", "", "师生互动", "", "书写板书", "", "指导学生", "", "教师讲授"];
      const dataValue = [];

      const infoData = this.courseData.teacher_behavior.teaching_behavior_source || {};

      this.setJsonData("tour", "interaction", "blackboard", "guidance", "teach", infoData, teaching_behavior);

      for (let i = 0; i < 9; i += 2) {
        for (let j = 0; j < teaching_behavior[keys[i / 2]].length; j++) {
          const key = keys[i / 2];
          const value = parseInt(teaching_behavior[key][j]) ? i + 1 : 0;
          dataValue.push([i, j, value]);
        }
      }
      const minuteXaxis = [];

      for (let i = 1; i < this.courseData.course_info.video_time; i++) {
        minuteXaxis.push(i);
      }

      const data = dataValue.map((item) => [item[1], item[0], item[2] || "-"]);

      this.behaviorOptions = {
        tooltip: {
          show: true,
          formatter: (obj) => {
            const hoverItem = infoData[enumTeaActionKey[obj.data[2]]].find((item) => {
              if (item.Start < obj.data[0] && obj.data[0] < item.End) {
                return item;
              }
            });
            // 后端数据返回分间隔但是又是连续的 需要特殊处理

            if (hoverItem) {
              return `${enumTeaAction[obj.data[2]]}: ${this.formatTimeHours(hoverItem.End - hoverItem.Start)}`;
            } else {
              return "";
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: minuteXaxis,
          splitArea: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#D7DBE0",
              borderType: [5, 10],
              borderDashOffset: 5
            }
          },
          axisLabel: {
            fontSize: 12,
            margin: 15,
            color: "#000",
            interval: parseInt(this.courseData.course_info.video_time / 5),
            formatter: (value) => {
              return `${this.formatTimeHours(value)}`;
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: yAxisText,
          splitArea: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#000"
            }
          },
          axisTick: {
            show: false
          }
        },
        visualMap: {
          type: "piecewise",
          hoverLink: false,
          min: 0,
          max: 10,
          orient: "horizontal",
          itemGap: 0,
          precision: 2,
          padding: 5,
          borderWidth: 1,
          borderColor: "none",

          show: false,
          pieces: [
            {
              gt: 0,
              lte: 1,
              color: "#cbe21a"
            },
            {
              gt: 1,
              lte: 3,
              color: "#15c136"
            },
            {
              gt: 3,
              lte: 5,
              color: "#6849ff"
            },
            {
              gt: 5,
              lte: 7,
              color: "#16c9ba"
            },
            {
              gt: 7,
              lte: 9,
              color: "#1978e5"
            }
          ],
          outOfRange: {
            color: "#999"
          }
        },
        series: [
          {
            name: "拥堵指数",
            type: "heatmap",
            data: data,
            label: {
              show: false
            },

            itemStyle: {
              borderWidth: 0,
              borderColor: "#FFFFFF"
            },

            emphasis: {
              itemStyle: {
                shadowOffsetY: 2,
                shadowBlur: 6,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    },

    //转换 教师行为轨迹数
    transTrajectoryData() {
      const { teaching_trajectory } = this.courseData.teacher_behavior;
      const data = [];

      for (let i = 0; i < teaching_trajectory.x.length; i++) {
        data.push([parseFloat(teaching_trajectory.x[i]), parseFloat(teaching_trajectory.y[i])]);
      }

      this.scatterData = data;
    },

    // 学生专注度
    transStuAttention() {
      const { curve_value } = this.courseData.student_behavior.show;
      const xAxis = curve_value.map((item, index) => index);
      this.attentionOriginData.data = curve_value;
      this.xAxisAttenData = xAxis;
    },

    // 转换学生情绪数据
    transStuEmoData() {
      const expressionData = this.courseData.student_behavior.expression.expression_value;
      const xAxis = expressionData.map((item, index) => index);
      this.emoOriginData.data = expressionData;
      this.xAxisEmoData = xAxis;
    },

    // 转换st数据
    transStData() {
      const { st_value } = this.courseData;
      // const infoOriginSTValue = [];
      // for (const key in st_value) {
      //   infoOriginSTValue.push(st_value[key]);
      // }

      const originSTData = {
        name: "课堂2",
        type: "line",
        step: "end",
        lineStyle: {
          color: "#3DE2FF"
        },
        itemStyle: {
          color: "rgb(33,148,246)",
          borderWidth: 1,
          borderColor: "#3DE2FF"
        },
        data: st_value.y
      };
      this.originSTData = originSTData;
      // this.max = infoOriginSTValue[infoOriginSTValue.length - 1];
      this.st_x_data = st_value.x;
      this.y_max = st_value.y[st_value.y.length - 1];
      this.x_max = st_value.x[st_value.x.length - 1];
    },

    // 转换rt-ch数据
    transRTChData() {
      const originPoint = {
        type: "effectScatter",
        symbolSize: 8,
        data: [],
        color: "#08fcff"
      };
      const rtData = [];
      const { rt_ch_value } = this.courseData;
      for (const key in rt_ch_value) {
        rtData.push(rt_ch_value[key]);
      }
      originPoint.data.push(rtData);

      this.originPoint = originPoint;
    }
  },
  created() {
    this.init();

    this.htmlTitle = `${this.courseData.course_info.course_name}课堂观察分析报告`;
  }
};
</script>
<style lang="scss" scoped>
.ai_report {
  box-sizing: border-box;

  margin: 50px auto;
  max-width: 1000px;
  background: #fff;

  .bgc_b {
    background-color: #eaf5ff;
  }
  .report_export {
    margin-top: 42px;

    margin-left: 820px;
  }

  .report_container {
    padding: 50px;
    .report_title {
      font-size: 26px;
      font-weight: bold;
      color: #000;
      text-align: center;
    }

    // 课堂信息
    .class_info {
      margin: 50px 0;

      .class_info_table {
        th,
        td {
          height: 40px;
          text-align: center;
          border: 1px solid #ddd;
        }
        th:nth-child(1),
        th:nth-child(3) {
          width: 160px;
          background-color: #eaf5ff;
        }

        th:nth-child(2),
        th:nth-child(4) {
          width: 380px;
        }

        td:nth-child(1),
        td:nth-child(3) {
          background-color: #eaf5ff;
        }
      }
    }

    .class_record {
      .class_record_table {
        width: 100%;
        margin-bottom: 30px;
        th,
        td {
          height: 65px;
          text-align: center;
          border: 1px solid #ddd;
        }
        th:nth-child(1) {
          background-color: #eaf5ff;
          height: 40px;
        }

        th:nth-child(2),
        th:nth-child(4) {
          width: 380px;
        }
        .average {
          background-color: #eaf5ff;
          width: 196px;
        }
      }

      .class_record_emo {
        .class_center {
          td {
            width: 130px;
          }
          td:not(:first-child):not(:last-child) {
            border: none;
          }

          td:first-child {
            border-right: none;
            border-bottom: none;
          }
          td:last-child {
            /* 在这里添加你想要的样式 */
            border-left: none;
            border-bottom: none;
          }

          .expression_box {
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            img {
              width: 25px;
              height: 25px;
            }
          }
        }
      }

      .class_record_teacher {
        th:first-child {
          width: 477px;
        }

        th {
          background-color: #eaf5ff;
          height: 40px;
        }
        td {
          line-height: 20px;
        }
      }

      .observation_table {
        margin-bottom: 30px;
        th {
          background-color: #eaf5ff;
        }

        th:nth-child(1) {
          width: 80px;
        }

        th:nth-child(2) {
          width: 252px;
        }

        th:nth-child(3) {
          width: 80px;
        }

        th:nth-child(4) {
          width: 582px;
        }
      }

      .class_atten_stu {
        line-height: 20px;
        font-size: 14px;
        .atten_stu_footer {
          td {
            height: 175px;

            .atten_stu_box {
              display: flex;
              flex-direction: column;
              align-items: start;
              padding-left: 10px;

              .atten_title {
                color: #000;
              }
              .text_box {
                margin-top: 20px;
                display: flex;
                flex-direction: column;
                align-items: start;
                color: #9aa6c5;

                .time_color {
                  color: #3880ff;
                }

                .text_orange {
                  color: #ff880a;
                }
              }
            }

            .atten_avg {
              font-size: 20px;
              color: #ff880a;
            }
          }
        }
        .class_stu_attention {
          padding-left: 51px;
        }
        .emo_td {
          width: 117px;
        }
      }
    }

    .class_structure {
      .record_class_table > tr > th:nth-child(1) {
        width: 120px;
      }

      .record_class_table > tr > th:nth-child(3) {
        width: 200px;
      }

      .record_class_table > tr > th:nth-child(2),
      .record_class_table > tr > th:nth-child(4) {
        width: 340px;
      }

      .record_class_table {
        th,
        td {
          width: 100px;
        }

        .scatter-tit {
          height: 616px;
        }

        .scatter-map-box {
          height: 406px;
        }

        .scatter-data-bx {
          height: 160px;
        }

        .join_table_tr2 {
          color: #d50000;
          font-weight: 600;
        }

        .teaching-model {
          height: 1270px;
        }
        .st_chart {
          display: flex;
          justify-content: center;
          margin-top: 20px;
        }

        .class-type-tit {
          .summary .el-textarea {
            width: 100%;
          }
        }

        .class_result {
          position: relative;

          .summary {
            .hide-p4 {
              float: left;
              padding: 20px;
              line-height: 18px;

              &:focus {
                outline: none;
              }
            }

            .numberWord {
              position: absolute;
              right: 5px;
              bottom: 5px;

              i {
                font-size: 12px;
                color: #020202;
              }

              i:nth-child(2) {
                color: #ccc;
              }
            }
          }
        }
      }
      .mix-style {
        span {
          font-size: 18px;
        }

        table {
          margin: 0 auto;
          th {
            background-color: #eaf5ff;
          }

          th,
          td {
            width: 100px;
          }

          th:nth-child(5),
          td:nth-child(5) {
            width: 230px;
          }
        }

        .a_r_tit {
          font-size: 16px;
          font-weight: 600;
          color: #000;
          line-height: 50px;
        }

        .change-maps-box {
          display: flex;
          justify-content: center;
          margin: 50px 0;
          .action-box-r1,
          .action-box-r3 {
            display: inline-block;
            width: 320px;
            height: 140px;
            background-color: #f4f4f4;
            margin-right: 10px;
          }

          .action-box-r1 {
            display: flex;
            .a-box-r1-l {
              display: inline-block;
              width: 50%;
              height: 100%;
              text-align: center;
              overflow: hidden;

              span {
                display: block;
              }

              .action-title {
                line-height: 40px;
                font-size: 12px;
              }

              .stu-rate {
                font-size: 20px;
                color: #08a8ff;
                margin-bottom: 20px;
              }

              .teacher-rate {
                font-size: 20px;
                color: #08fcff;
              }
            }
          }

          .action-box-r3 {
            text-align: center;

            p:nth-child(1) {
              line-height: 88px;
              height: 88px;
              font-size: 20px;
              font-weight: 600;
            }

            p:nth-child(2) {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

.class_title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}

.vertical-rl {
  writing-mode: vertical-rl;
  text-align: center;
}

th,
td {
  height: 40px;
  text-align: center;
  border: 1px solid #ddd;
}

.ch_container {
  margin: 10px 0;

  .st_tip {
    text-align: justify;
    line-height: normal;
    li {
      list-style: disc;
      margin: 0 125px;
    }
    li:first-child {
      list-style: none;
    }
  }
}

.trajectory {
  margin-left: 90px;
  background: aliceblue;
}
</style>
